<script setup>
import { reactive, toRef, ref, shallowRef, triggerRef } from 'vue'

const user = reactive({
    name: '张三',
    age: 18
})

// toRef 返回一个具备响应式的属性
const sex = toRef(user)


function change() {
    sex.value = '男'
}

const obj = shallowRef({
    a: 100,
    b: 200
})
function changeA() {
    obj.value.a = 666
    // obj.value = {
    //     a: 666
    // }

    // 强制更新浅层
    triggerRef(obj)
}

</script>
<template>
    <h1>
        {{ user.name }} --- {{ user.age }}
        -- {{ sex }}
    </h1>
    <button @click="change">修改</button>
    <hr>
    <h1>{{ obj.a }}</h1>
    <button @click="changeA">修改 a</button>
</template>